.sub-menu-item {
  position: relative;
  .sub-menu-title {
    display: flex;
    align-items: center;
  }
  .sub-menu {
    position: absolute;
    // display: none;
    padding-left: 0;
    top: calc(100% + 8px);
    left: 0;
    list-style: none;
    white-space: nowrap;
    background: $white;
    border: $menu-border-width solid $menu-border-color;
    box-shadow: $submenu-box-shadow;
    z-index: 100;
    .menu-item:hover,
    .menu-item.is-active {
      border-color: transparent;
    }
  }
  .arrow-icon {
    transition: transform 0.25s ease-in-out;
    margin-left: 3px;
  }
  &:hover {
    .arrow-icon {
      transform: rotate(180deg);
    }
  }
  // &.is-opened {
  //   .sub-menu {
  //     display: block;
  //   }
  // }
  &.is-vertical {
    &:hover {
      .arrow-icon {
        transform: rotate(0);
      }
    }
    &.is-opened {
      .arrow-icon {
        transform: rotate(180deg);
      }
    }
    .sub-menu {
      position: static;
      border: none;
      box-shadow: none;
    }
  }
}
